<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <link rel="stylesheet" href="/static/iconfont/iconfont.css">
  <title>萌点后台管理系统</title>
  <style>
     *{
      padding: 0;
      margin: 0;
    }
    #header{
      height:56px;
      width: 100%;
      border:1px solid rgba(3,119,165,100);
      background:rgba(3,119,165,100);
      position:fixed;
      z-index: 999;
    }
    #header a{
      color:black;
      text-decoration:none;
    }
    #header a:hover{
      color: #df5621;
    }
    #h2{
      color: white;
    }
    .daohang{
      list-style-type: none;
      margin:0;
      padding:0;
    }
    .daohang li{
      display: block;
      height: 70px;
      text-align:center;
      line-height: 5px;
      color: white;
      border: none;
    }
    .daohang li:hover{
      background-color: white;
      color:rgba(3,119,165,100);
    }
    #left{
      position: fixed;
      top:56px; width:5%; 
      height: 100%; left: 0; 
      background-color:rgba(3,119,165,100)
    }
    #userinfo{
      color:white;
      position: absolute;
      right: 100px;
      top: 20px
    }
    #list {
      position:absolute;
      top:68px;
      width:60%;
      margin-left:200px ;
      width:80%;
    }
    #welcome{
      height: 300px;
      width: 90%;
      border: 1px solid #ccc;
      background-color: #eee;
      border-radius: 1rem;
    }
    #welcome p{
      font-size: 60px;
      font-weight: 700;
    }
    button{
      margin-left: 40%;
      margin-top: 100px;
      border-color:rgba(3,119,165,100) ;
    }
    #tongji{
      margin-top: 80px;
      height: 100px;
      width: 90%;
      border: 1px solid #ccc;
      background-color: #eee;
      border-radius: 1rem;
    }
    #tongji div{
      float: left;
      /* border: 1px solid #ccc; */
      width: 20%;
      height: 100px;
    }
    #weather{
      color:#aaa;
      top:10px;
      position: absolute;
      left: 600px;
      border-radius: 1rem;
    }
    #tongji{
      text-align: center;
    }
    #tongji span{
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <div id='header'>
    <div id='h2'><h2 style='margin-left: 50px;'>萌点后台管理系统</h2></div>
    <div id="userinfo" class="userinfo"></div>
  </div>
  <div>
      <div id='left'>
        <ul class="daohang">
          <li style='background-color: white;color:rgba(3,119,165,100);' onclick="toHome()">
            <i style="font-size:25px" class='iconfont iconshouye'></i>
            <p style="font-size:10px">首页</p>
          </li>
          <li onclick="toDongtai()">
            <i style="font-size:25px" class='iconfont iconfaburenwu'></i>
            <p style="font-size:10px">动态</p>
          </li>
          <li onclick="toUser()">
            <i style="font-size:25px" class='iconfont iconyonghu'></i>
            <p style="font-size:10px">用户</p>
          </li>
          <li onclick="toAdmin()">
            <i style="font-size:25px" class='iconfont iconyonghu1'></i>
            <p style="font-size:10px">管理员</p>
          </li>
          <li onclick="toElse()">  
            <i style="font-size:25px" class='iconfont iconguanli'></i>
            <p style="font-size:10px">管理</p>
          </li>
        </ul>
      </div>
      <div id='list'>
        <p>>首页</p>
        <div id='welcome'>
          <p style='padding-top:60px;padding-left: 60px;'>Welcome!</p>
          <span style='padding-left:70px'>欢迎来到萌点-流浪动物救助后台管理系统,找到萌萌的地点就是温暖的起点</span>
          <div id='weather'></div>
        </div>
        <div id='tongji'>
        </div>
      </div>
  </div>
  <script>
    var weather=document.getElementById('weather');
    var adminlist=document.getElementById('adminlist')
    var tongji =document.getElementById('tongji')
    //登录判断
    function getToken () {
      return localStorage.getItem('token') || ''
    }
    function getMyInfo () {
      let uinfo = localStorage.getItem('userinfo')
      if (uinfo) {
        try {
          return JSON.parse(uinfo)
        } catch (err) {
          return null
        }
      }
      return null
    }
    function checkLogin() {
      let tk = getToken()
      if (!tk) {
        location.href = '/login'
        return
      }
      let uinfo = getMyInfo()
      if (uinfo === null) {
        location.href = '/login'
      } else {
        //登录超时
        if (uinfo.time + uinfo.expires < Date.now()) {
          localStorage.removeItem('token')
          localStorage.removeItem('userinfo')
          location.href = '/login'
        }
      }
    }
    //检测是否登录并跳转
    checkLogin()
    
    //跳转函数
    function toHome(){
      location.href='/home'
    }
    function toUser(){
        location.href='/user'
    }
    function toElse(){
      location.href='/else'
    }
    function toDongtai(){
      location.href='/dongtai'
    }
    function toAdmin(){
      location.href='/admin'
    }
    //fetch封装
    function apicall (path, options = {}) {
      let token = getToken()
      let q = '?'
      if (path.indexOf('?') > 0) {
        q = '&'
      }
      path = `${path}${q}token=${token}`
      return fetch(path, options).then(async res => {
        if (!res.ok) {
          let errtext = await res.text()
          throw new Error(`${res.status} : ${errtext}`)
        } else {
          return res.text()
        }
      })
    }

    //登录用户信息
    function getUserInfo (id) {
      return apicall('/user/admin/'+id).then(d => {
        let uinfo = JSON.parse(d)
        showUserInfo(uinfo)
      })
      .catch(err => {
        alert(err.message)
      })
    }
    function showUserInfo (u) {
      let html = `
        <a style='color:white' href='/manage'>${u.username}</a>
        <a href="javascript:logout(this);">
          退出
        </a>
      `
      document.getElementById('userinfo').innerHTML = html
    }

    //退出登录
    function logout () {
      if (!confirm('确定退出？')) {
        return
      }
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      location.href = '/login'
    }
    
    //得到天气
    function getWeather() {
      var city = '石家庄'
      var params = new Object();
      params.city=city;
      fetch('https://v0.yiketianqi.com/api?version=v61&appid=24524629&appsecret=NHQM336i&city='+city)
      .then(res=>res.json())
      .then(res=>{
        // console.log(res)
        let html=`<span>
          坐标：${city}
          天气：${res.wea}
          温度：${res.tem}
          最高气温${res.tem1}
          最低气温${res.tem2}  
          </span>    
        `
        let weather=document.getElementById('weather');
        weather.innerHTML=html
      })
    }

    //统计数量
    function getNum(){
      apicall('/user/num').then(d=>{
        let numlist=JSON.parse(d)
        show(numlist)
      }).catch(err=>{
        alert(err.message)
      })
    }

    function show(numlist){
      var html=`
          <div><span>${numlist[0]}</span></br>用户数量</div>
          <div><span>${numlist[1]}</span></br>商品数量</div>
          <div><span>${numlist[2]}</span></br>动态数量</div>
          <div><span>${numlist[3]}</span></br>店铺数量</div>
          <div><span>${numlist[4]}</span></br>管理员数量</div>
      `
      tongji.innerHTML=html
    }

    window.onload = () => {
      getUserInfo('self')
      getWeather()
      getNum()
    }

  </script>
</body>
</html>
